<template>
	<view class="main">
		<navbar titleColor="#fff" transparent :isFixed="false" :isBack="false">
			<view class="navbar" slot="navbar" @click="toBack">
				<van-icon name="arrow-left" size="20" color="#fff" />
			</view>
		</navbar>
		<view class="content">
			<!-- 顶部进度 start -->
			<view class="topBox">
				<ul class="numBox">
					<li :class="progress == 1 ? 'active' : ''"><span>1</span></li>
					<li :class="progress == 2 ? 'active' : ''"><span>2</span></li>
					<li :class="progress == 3 ? 'active' : ''"><span>3</span></li>
				</ul>
				<ul class="textBox">
					<li :class="progress == 1 ? 'active' : ''"><span>注册类型</span></li>
					<li :class="progress == 2 ? 'active' : ''"><span>完善信息</span></li>
					<li :class="progress == 3 ? 'active' : ''"><span>审核</span></li>
				</ul>
			</view>
			<!-- 顶部进度 end -->

			<!-- 选择身份 start -->
			<view class="selectContent" v-if="progress==1">
				<ul>
					<li :class="identityType?'active':''" @click="selectIdentity(true)">
						<i></i>
						<em></em>
						<span>企业（ 用人单位 ）</span>
					</li>
					<li :class="!identityType?'active':''" @click="selectIdentity(false)">
						<i></i>
						<em></em>
						<span>求职者</span>
					</li>
					<li>
						<button @click="openRegister(2)">下一步</button>
					</li>
				</ul>
			</view>
			<!-- 选择身份 end -->
			<!-- 企业端表单 start -->
			<view class="registerForm">
				<registerCompanies v-if="identityType&&progress==2" :openid="openid"></registerCompanies>
			</view>
			<!-- 企业端表单 end -->
			<!-- 学生端表单 start -->
			<view class="registerForm">
				<registerStudent v-if="!identityType&&progress==2" :openid="openid"></registerStudent>
			</view>
			<!-- 学生端表单 end -->
			<!-- 注册审核 start -->
			<view class="registerAudit" v-if="progress==3">
				<view class="registerAuditContent">
					<van-icon name="checked" class="successIcon" />
					<view class="h3">恭喜</view>
					<view class="p">您已经成功提交信息，资料审核中，请耐心等待。</view>
					<button class="successBtn" @click="openHome">立即进入</button>
				</view>
			</view>
			<!-- 注册审核 end-->
		</view>
		<view class="main-bj">
			<image :src="imgUrl + 'register-bj.jpg'" mode="widthFix"></image>
		</view>
	</view>
</template>

<script>
	import Navbar from '@/components/Navbar.vue';
	import registerCompanies from './registerCompanies.vue';
	import registerStudent from './registerStudent.vue';
	import {
		getOpenId
	} from "@/core/web-api/login.js"
	import { mapState } from 'vuex';
	export default {
		data() {
			return {
				identityType: true,
				progress: 1,
				wxH: this.$wxHanderInformation,
				openid:"",
			}
		},
		components: {
			registerCompanies,
			registerStudent,
			Navbar
		},
		methods: {
			toBack(){
				if(this.progress==1){
					uni.navigateBack()
				}else{
					this.progress--
				}
			},
			selectIdentity(type) {
				this.$data.identityType = type;
			},
			openRegister(num) {
				this.$data.progress = num;
			},
			openHome() {
				if(this.$data.identityType){
					//企业进入游客模式
					this.$store.commit("setYoukeType",1)
					this.$store.commit("setYkqiyeToken",this.$store.state.token);
					this.$store.commit("setType","");
					this.$store.commit("setToken","");

					uni.reLaunch({
						url:"/pages/youke/web/home/home"
					})

										
				}else{
					uni.redirectTo({
						url: '/pages/web/home/home'
					})
				}
			},
			getOpenId() {
				let that = this
				wx.login({
					success(res) {
						if (res.code) {
							getOpenId({
								code: res.code
							}).then(data => {
								that.openid = data.data.openid;
								that.$store.commit("setOpenId", data.data.openid);
							})
						}
					}
				})
			}
		},
		computed:{
			...mapState(['openId','imgUrl'])
		},
		created() {
			if (!this.openid) {
				this.getOpenId();
			}
		}
	}
</script>

<style scoped lang="less">
	.navbar{
		margin-left: 45upx;
	}
	.main {
		width: 100vw;
		height: 100vh;

		&-bj {
			width: 100%;
			height: 100vh;
			position: fixed;
			left: 0;
			top: 0;
			z-index: -1;

			image {
				width: 100%;
				height: 100%;
			}
		}
	}

	.registerImgBg {
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
	}

	.content {
		width: 100%;
		position: relative;
		padding-bottom: 40rpx;
	}

	.topBox {
		width: 100%;
		padding: 100rpx 110rpx 100rpx;
		box-sizing: border-box;
	}

	.topBox ul {
		width: 100%;
		overflow: hidden;
	}

	.topBox ul li {
		width: 33.33%;
		text-align: center;
		float: left;
	}

	.numBox span {
		display: inline-block;
		width: 56rpx;
		height: 56rpx;
		line-height: 56rpx;
		background: #FFFFFF;
		border-radius: 50%;
		font-family: SourceHanSansCN;
		font-weight: 500;
		font-size: 30rpx;
		color: #999999;
	}

	.numBox {
		position: relative;
		margin-bottom: 26rpx;
	}

	.numBox::after,
	.numBox::before {
		content: "";
		display: block;
		position: absolute;
		top: 50%;
		width: 84rpx;
		height: 2rpx;
		background: #C0CCE5;
	}

	.numBox::after {
		left: 25%;
	}

	.numBox::before {
		right: 25%;
	}

	.textBox span {
		font-family: Microsoft YaHei;
		font-weight: 400;
		font-size: 18px;
		color: #FFFFFF;
	}

	.numBox li.active span {
		background: #0180FF;
		color: #FFFFFF;
	}

	.textBox li.active span {
		color: #0180FF;
		text-shadow: none;
	}

	.selectContent,
	.registerForm,
	.registerAudit {
		width: 100%;
		box-sizing: border-box;
		padding: 0 20rpx;
		overflow: hidden;
		position: relative;
	}

	.selectContent ul {
		width: 100%;
		background: #fff;
		border-radius: 20rpx 20rpx 0rpx 0rpx;
		border: 1px solid #FFFFFF;
		padding: 136rpx 72rpx 29vh;
		box-sizing: border-box;
	}

	.selectContent ul li {
		width: 100%;
		line-height: 100rpx;
		padding-left: 28rpx;
		box-sizing: border-box;
		background: rgba(255, 255, 255, 0.8);
		box-shadow: 0rpx 13rpx 17rpx 0rpx rgba(89, 120, 203, 0.08);
		border-radius: 12rpx;
		margin-bottom: 76rpx;
	}

	.selectContent ul li i {
		display: inline-block;
		vertical-align: middle;
		width: 32rpx;
		height: 32rpx;
		background: #EAEAEB;
		border-radius: 50%;
		margin-right: 20rpx;
	}

	.selectContent ul li em {
		width: 2rpx;
		height: 20rpx;
		display: inline-block;
		background: #000000;
		opacity: 0.22;
		margin-right: 32rpx;
	}

	.selectContent ul li span {
		font-family: Microsoft YaHei;
		font-weight: 400;
		font-size: 26rpx;
		color: #C1C1C1;
	}

	.selectContent ul li.active {
		background: #0180FF;
		box-shadow: 0px 6rpx 20rpx rgba(1, 128, 255, 0.5);
	}

	.selectContent ul li.active i {
		width: 24rpx;
		height: 24rpx;
		background: #009CFF;
		border-radius: 50%;
		border: 6rpx solid #fff;
	}

	.selectContent ul li.active span {
		color: #fff;
	}

	.selectContent ul li:last-child {
		padding: 0;
		box-shadow: 0rpx 6rpx 20rpx rgba(1, 128, 255, 0.5);
	}

	.selectContent ul li button {
		width: 100%;
		background: #009CFF;
		color: #FFFFFF;
	}

	.registerAuditContent {
		width: 100%;
		min-height: 464px;
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 0 0;
		border: 1px solid #FFFFFF;
		padding: 126rpx 60rpx 218rpx;
		box-sizing: border-box;
		text-align: center;
		position: relative;
	}

	.registerAuditContent .successIcon {
		font-size: 80rpx;
		color: #2DBF77;
		margin-bottom: 30rpx;
	}

	.registerAuditContent .h3 {
		font-family: Microsoft YaHei;
		font-weight: 400;
		font-size: 32rpx;
		color: #000000;
		margin-bottom: 40rpx;
	}

	.registerAuditContent .p {
		font-family: Microsoft YaHei;
		font-weight: 400;
		font-size: 28rpx;
		color: #666666;
		margin-bottom: 280rpx;
	}

	.registerAuditContent .successBtn {
		width: 100%;
		height: 84rpx;
		line-height: 82rpx;
		background: #0180FF;
		border-radius: 10rpx;
		text-align: center;
		font-family: Microsoft YaHei;
		font-weight: 400;
		font-size: 32rpx;
		color: #FFFFFF;
	}
</style>